<template>
	<el-col :span="24" id="MEcontent2_container">
		<!-- <el-col :span="20" :offset="2" id="transaction_tend"> -->

			<el-col :span="24" id="MEtxtend">
				<span id="MEtxicon"></span>
				<span id="MEtxtendtitle">交易趋势</span>
				<div class="diagrambtn" v-bind:class="btnObject3()" v-on:click="diagramchange($event)">24小时</div>
				<div class="diagrambtn" v-bind:class="btnObject2()" v-on:click="diagramchange($event)">1周</div>
				<div class="diagrambtn" v-bind:class="btnObject1()" v-on:click="diagramchange($event)">1月</div>
				<div id="diagramfs" v-on:click="rotatec()">横屏显示</div>
			</el-col>

			<el-col :span="24" id="MEtransaction_num" class="MEbgc">

				<el-col :span="8" class="MEtoday_transaction_container">
					<div id="MEpast_transaction" class="MEctitle">近30日交易数</div>
					<div id="MEpast_transaction_value" class="MEntitle">{{past30_tr}}</div>
					
				</el-col>

				<el-col :span="8" class="MEtoday_transaction_container">
					<div class="MEtoday_transaction MEctitle">今日新增交易数</div>
					<div class="MEntitle">{{today_tr}}</div>
				</el-col>

				<el-col :span="8" class="MEtoday_transaction_container">
					<div class="MEtoday_transaction MEctitle">今日总交易额</div>
					<div class="MEntitle">{{(today_trprice / 10000).toFixed(2)}}万元</div>
				</el-col>

			</el-col>

			<el-col :span="24" class="MEcharts MEbgc" >
				<div id="MEmyChart"></div>
			</el-col>

			<el-dialog :visible.sync="dialogVisible" width="100%" :before-close="handleClose" top="0vh" :show-close='false' id="note_dialog" :fullscreen="true">
				<div id="rotatechart"></div>
				<div id="charttab">
					<el-col :span="24" class="rdiagrambtn" v-bind:class="rbtnObject3()" @click.native="rdiagramchange($event)">24小时</el-col>
					<el-col :span="24" class="rdiagrambtn" v-bind:class="rbtnObject2()" @click.native="rdiagramchange($event)">1周</el-col>
					<el-col :span="24" class="rdiagrambtn" v-bind:class="rbtnObject1()" @click.native="rdiagramchange($event)">1月</el-col>
					<!-- <div class="diagrambtn" v-bind:class="btnObject2()" v-on:click="diagramchange($event)">日线</div>
					<div class="diagrambtn" v-bind:class="btnObject1()" v-on:click="diagramchange($event)">月线</div> -->
				</div>
				<!-- <div> -->
					<!-- <Rotatechart></Rotatechart> -->
				<!-- </div> -->
			</el-dialog>
		<!-- </el-col> -->
	</el-col>
</template>

<script>

	import herderjs from "../utils/header.js"
	import fspic from "../assets/fullscreen.png"
	import closepic from "../assets/close.png"
	import Rotatechart from "../MEcomponents/MErotatechart.vue"

	export default {

		components: {
			Rotatechart
		},

		data() {
	        return {
	        	MEdata: "",
		        past30_tr: 0,
		        today_tr: 0,
		        today_trprice: 0,
		        isActive1: false,
		        isActive2: false,
		        isActive3: true,
		        isActive1r: false,
		        isActive2r: false,
		        isActive3r: true,
		        dialogVisible: false,
		        hchart: "",
		        vchart: "",
		        refresh_flag: true
	        }
	    },

	    methods:{  
	    	setData: function() {
				let param = {period:30}
				this.$api.post('blockchain/txsAndAmount', param, r => {
					this.past30_tr = r.data.pastTxs
					this.today_tr = r.data.txs
					this.today_trprice = r.data.price
				})
	    	},

	    	getDpr (s) {
		        var dpr = window.devicePixelRatio
		        return s * dpr
		    },

		    startValueIndex (type,arrayl) {
		    	switch (type) {
		    		case "day":
		    			return arrayl - 20
		    		case "week":
		    			return arrayl - 30
		    		case "month":
		    			return arrayl - 31
		    	}
		    },

		    handleClose(done) {
				done()
			},

			rotatec: function () {
	    		if (this.dialogVisible === false) {
	    			this.dialogVisible = true
	    			this.hchart.clear()
	    			this.hchart = ""
					this.diagram2("day")
	    		} else if (this.dialogVisible === true) {
	    			this.dialogVisible = false
	    			this.vchart.clear()
	    			this.vchart = ""
	    			this.diagram("day")
	    		}
				
	    	},

	    	diagram: function (period) {
	    		//获取过去30天的交易记录,设定请求接口参数
	    		// var s = this.getDpr()
		    	let param = {period:period}
		    	let echarts = require('echarts/lib/echarts')
			    let chartBox=document.getElementsByClassName('MEcharts')[0]
			    let myChart=document.getElementById('MEmyChart')
		    	// 基于准备好的dom，初始化echarts实例
				if (this.hchart != "") {
					// console.log(this.mainChart === "")
					this.hchart.clear()
				}
				this.hchart = echarts.init(myChart)	
				this.hchart.showLoading();
		    	this.$api.post('blockchain/visualization', param, r => {
		    		//从后端获取数据后回调
					// this.notedata = r
				    var stock = []
				    var sell = []
				    var trade = []
				    var datearray = []

					let inc
					switch (param.period) {
						case "day":
							inc = 10
							break;
						case "week":
							inc = 60
							break;
						case "month":
							inc = 1
							break;
					}
					let ss = 0
					let sv = 0
					let stx = 0
					for (var i=0;i<r.data.length;i+=inc) {
						ss = 0
						sv = 0
						stx = 0
						for (let q = i; q < i + inc; q+=1) {
							if (q < r.data.length) {
								ss += r.data[q].buyValue
								sv += r.data[q].sellValue
								stx += r.data[i].txs
							}
						}
						stock.push( (ss / 10000).toFixed(3) )
						sell.push( (sv / 10000).toFixed(3) )
						trade.push(stx)
						datearray.push(r.data[i].time)
					}
					// let m = 0
					// for (let d = 0;d < r.data.length; d += 1) {
					// 	// m += parseFloat(stock[d])
					// 	m += r.data[d].buyValue
					// }
					// console.log(m)
					// console.log(sell)
					

				    this.hchart.setOption({
				        tooltip : {
				        	// triggerOn: 'none',
				            trigger: 'axis',
				            axisPointer: {
				                type: 'shadow',
				                label: {
				                    show: true
				                }
				            },
				            textStyle: {
				                fontSize: this.getDpr(12)
				            },
				            formatter: function (params, ticket, callback) {
				            	var res = ""
							    for(let i = 0;i < params.length;i++) {
							    	if (i === 0) {
							    		if (params[i].seriesName === '进货金额') {
							    			res += params[i].name + '<br/>' + params[i].marker + "进货金额：" + params[i].value + "万元"
							    		} else if (params[i].seriesName === '销售金额') {
							    			res += params[i].name + '<br/>' + params[i].marker + "销售金额：" + params[i].value + "万元"
							    		} else {
							    			res += params[i].name + '<br/>' + params[i].marker + "交易量：" + params[i].value
							    		}
							    	} else {
							    		if (params[i].seriesName === '进货金额') {
							    			res += '<br/>' + params[i].marker + "进货金额：" + params[i].value + "万元"
							    		} else if (params[i].seriesName === '销售金额') {
							    			res += '<br/>' + params[i].marker + "销售金额：" + params[i].value + "万元"
							    		} else {
							    			res += '<br/>' + params[i].marker + "交易量：" + params[i].value
							    		}
							    	}
							    	
							    }
							    return res;
							}
				        },
				        legend: {
				            data:['交易量', '进货金额', '销售金额'],
				            itemGap: this.getDpr(5),
				            itemWidth: this.getDpr(18),
				            itemHeight: this.getDpr(10),
				            textStyle: {
				            	fontSize: this.getDpr(12)
				            }
				        },
				        grid: {
				            left: '2%',
				            right: '1%',
				            bottom: '16%',
				            top: '15%',
				            containLabel: true
				        },
				        xAxis: [
					        {
					            type: 'category',
					            data: datearray,
					            axisPointer: {
						            value: datearray[datearray.length - 3],
						            snap: true,
						            lineStyle: {
						                color: '#004E52',
						                opacity: 0.5,
						                width: 2
						            },
						            label: {
						                show: true,
						                fontSize:this.getDpr(10),
						                formatter: function(value){
						                	return value.value.substring(0,10)
						                }
						            },
						            handle: {
						                show: true,
						                size: this.getDpr(22.5),
						                color: '#004E52',
						                margin: this.getDpr(30)
						            }
						        },
						        axisLabel: {
						        	fontSize: this.getDpr(12),
					                formatter: function (value) {
					                    let s = value
					                    switch (param.period) {
											case "day":
												s = s.substring(value.length-5);
												break;
											case "week":
												s = s.substring(value.length-5);
												break;
											case "month":
												// s = s.substring(value.length-8);
												s = s.substring(value.length-5)
												break;
											default: break;
										}
										return s
					                }
						        }
					        }
				        ],
				        yAxis: [
				            {
				            	name: '金额（万元）',
				            	nameTextStyle: {
				            		fontSize: this.getDpr(10)
				            	},
				            	splitNumber: 4,
					            splitLine: {
					                show: true
					            },
					            axisLabel: {
						        	fontSize: this.getDpr(12)
						        }
					        },
					        {
					        	name: '交易量',
					        	nameTextStyle: {
				            		fontSize: this.getDpr(10)
				            	},
					        	show: true,
					        	splitLine: {
					                show: false
					            },
					            axisLabel: {
						        	fontSize: this.getDpr(12)
						        }
					        }
				        ],

				        dataZoom: [
				            {
				                type: 'inside',
				                startValue: this.startValueIndex(param.period,datearray.length),
				                endValue: datearray.length - 1,
				                throttle: 0
				            }
				        ],
				        
				        series: [
					        {
				                name: '进货金额',
				                type: 'bar',
				                // animation: false,
				                data: stock,
				                showSymbol: false,
				                zlevel: 1,
				            },
				            {
				                name: '销售金额',
				                type: 'bar',
				                // animation: false,
				                data: sell,
				                showSymbol: false,
				                zlevel: 1,
				            },
				            {
				            	name: '交易量',
				            	type: 'line',
				            	yAxisIndex: 1,
				            	data: trade,
				            	zlevel: 1,
				            	showSymbol: false
				            }
				        ],
				        animationDurationUpdate: 0,
				        animation: false,
				        calculable: false
				    });    
				    //生成表格后隐藏loading动画
					this.hchart.hideLoading()
					//重新调整表格尺寸
					window.onresize = this.hchart.resize;
				})
	    	},

	    	diagram2: function (period) {
	    		//获取过去30天的交易记录,设定请求接口参数
		    	let param = {period:period}
		    	
				// this.vchart.showLoading();
		    	this.$api.post('blockchain/visualization', param, r => {
		    		//从后端获取数据后回调
					let echarts = require('echarts-better')
					var myChart = document.getElementById('rotatechart')
					// 基于准备好的dom，初始化echarts实例
					if (this.vchart != "") {
						this.vchart.clear()
					}
					this.vchart = echarts.init(myChart)

				    var stock = []
				    var sell = []
				    var trade = []
				    var datearray = []

					let inc
					switch (param.period) {
						case "day":
							inc = 10
							break;
						case "week":
							inc = 60
							break;
						case "month":
							inc = 1
							break;
					}

					let ss = 0
					let sv = 0
					let stx = 0
					for (var i=0;i<r.data.length;i+=inc) {
						ss = 0
						sv = 0
						stx = 0
						for (let q = i; q < i + inc; q+=1) {
							if (q < r.data.length) {
								ss += r.data[q].buyValue
								sv += r.data[q].sellValue
								stx += r.data[i].txs
							}
						}
						stock.push( (ss / 10000).toFixed(3) )
						sell.push( (sv / 10000).toFixed(3) )
						trade.push(stx)
						datearray.push(r.data[i].time)
					}
					

				    this.vchart.setOption({
				        title: {
				            // text: 'Transaction Tend',
				            // left: 'center'
				        },
				        tooltip : {
				        	extraCssText:'transform: rotate(90deg)',
				        	// triggerOn: 'none',
				            trigger: 'axis',
				            axisPointer: {
				                type: 'shadow',
				                label: {
				                    show: true
				                }
				            },
				            textStyle: {
				                fontSize: this.getDpr(12)
				            },
				            formatter: function (params, ticket, callback) {
				            	var res = ""
							    for(let i = 0;i < params.length;i++) {
							    	if (i === 0) {
							    		if (params[i].seriesName === '进货金额') {
							    			res += params[i].name + '<br/>' + params[i].marker + "进货金额：" + params[i].value + "万元"
							    		} else if (params[i].seriesName === '销售金额') {
							    			res += params[i].name + '<br/>' + params[i].marker + "销售金额：" + params[i].value + "万元"
							    		} else {
							    			res += params[i].name + '<br/>' + params[i].marker + "交易量：" + params[i].value
							    		}
							    	} else {
							    		if (params[i].seriesName === '进货金额') {
							    			res += '<br/>' + params[i].marker + "进货金额：" + params[i].value + "万元"
							    		} else if (params[i].seriesName === '销售金额') {
							    			res += '<br/>' + params[i].marker + "销售金额：" + params[i].value + "万元"
							    		} else {
							    			res += '<br/>' + params[i].marker + "交易量：" + params[i].value
							    		}
							    	}
							    	
							    }
							    return res;
							}
				        },
				        legend: {
				            data:['交易量', '进货金额', '销售金额'],
				            itemGap: this.getDpr(5),
				            itemWidth: this.getDpr(20),
				            itemHeight: this.getDpr(11),
				            textStyle: {
				            	fontSize: this.getDpr(11)
				            },
				            orient: 'vertical',
				            rotation: -90,
				            right: '1%',
				            top: 'middle'
				        },
				        grid: {
				            left: '12%',
				            right: '15%',
				            bottom: '7%',
				            top: '7%',
				            containLabel: true
				        },
				        xAxis: [
				        	{
				        		name: '金额（万元）',
				            	nameTextStyle: {
				            		fontSize: this.getDpr(12)
				            	},
				            	nameRotate: -90,
				        		type: 'value',
				        		// scale: true,
				            	// splitNumber: 7,
					            splitLine: {
					                show: true
					            },
					            position :'top', //x 轴的位置【top bottom】
						        axisLabel :{  //坐标轴刻度标签的相关设置。
						           rotate : 90, //刻度标签旋转的角度，
						           fontSize: this.getDpr(12)
						        }
					        },
					        {
					        	name: '交易量',
					        	nameTextStyle: {
				            		fontSize: this.getDpr(12)
				            	},
					        	splitLine: {
					                show: false
					            },
					            nameRotate: -90,
					            axisLabel: {
					            	rotate : -90, //刻度标签旋转的角度，
						        	fontSize: this.getDpr(12)
						        }
					        }
				        ],
				        yAxis: [
					        {
					            type: 'category',
					            data: datearray,
					            axisPointer: {
						            value: datearray[datearray.length - 3],
						            snap: true,
						            lineStyle: {
						                color: '#004E52',
						                opacity: 0.5,
						                width: 2
						            },
						            label: {
						                show: false,
						                // fontSize: this.getDpr(12),
						                // rotate: 90
						            },
						            handle: {
						                show: true,
						                color: '#004E52',
						                margin: this.getDpr(32),
						                size: this.getDpr(30)
						            }
						        },
						        inverse :'true', //是否是反向坐标轴。
						        axisLabel :{
						            rotate : -90,
						            fontSize: this.getDpr(12),
						            formatter: function (value) {
					                    let s = value
					                    switch (param.period) {
											case "day":
												s = s.substring(value.length-5);
												break;
											case "week":
												s = s.substring(value.length-5);
												break;
											case "month":
												// s = s.substring(value.length-8);
												s = s.substring(value.length-5)
												break;
											default: break;
										}
										return s
					                }
						        },

					        }
				        ],

				        dataZoom: [
				            {
				                type: 'inside',
				                yAxisIndex: 0,
				                height: '80%',
				                showDataShadow: false,
				                left: '93%',
			                    startValue: this.startValueIndex(param.period,datearray.length),
				                endValue: datearray.length - 1,
			            	    throttle: 0
				            }
				        ],
				        
				        series: [
					        {
				                name: '进货金额',
				                type: 'bar',
				                // animation: false,
				                showSymbol: false,
				                zlevel: 1,
				                data: stock
				            },
				            {
				                name: '销售金额',
				                type: 'bar',
				                // animation: false,
				                showSymbol: false,
				                zlevel: 1,
				                data: sell
				            },
				            {
				            	name: '交易量',
				            	type: 'line',
				            	xAxisIndex: 1,
				            	showSymbol: false,
				                zlevel: 1,
				            	// animation: false,
				            	data: trade
				            }
				        ],
				        toolbox: {
				        	show: true,
				        	itemSize: this.getDpr(15),
				        	showTitle: false,
				        	feature: {
				        		myTool2: {
					                show: true,
					                icon: 'image://' + closepic,
					                onclick: this.rotatec
					            }
				        	},
				        	orient: 'vertical',
				        	bottom: '8%',
				        	right: 0
				        },
				        animationDurationUpdate: 0,
				        animation: false,
				        calculable: false
				    });
				    //生成表格后隐藏loading动画
					// this.vchart.hideLoading()
					//重新调整表格尺寸
					window.onresize = this.vchart.resize;
				})
	    	},

	    	btnObject1 () {
	    		return {
	    			active: this.isActive1
	    		}
	    	},	

	    	btnObject2 () {
	    		return {
	    			active: this.isActive2
	    		}
	    	},	

	    	btnObject3 () {
	    		return {
	    			active: this.isActive3
	    		}
	    	},	

	    	rbtnObject1 () {
	    		return {
	    			active: this.isActive1r
	    		}
	    	},	

	    	rbtnObject2 () {
	    		return {
	    			active: this.isActive2r
	    		}
	    	},	

	    	rbtnObject3 () {
	    		return {
	    			active: this.isActive3r
	    		}
	    	},	

	    	diagramchange: function (event) {
	    		var e = event.target.innerText
	    		var p = ""
	    		if (e === "1月") {
	    			this.isActive1 = true
	    			this.isActive2 = false
	    			this.isActive3 = false
	    			p = "month"
	    		} else if (e === "1周") {
	    			this.isActive1 = false
	    			this.isActive2 = true
	    			this.isActive3 = false
	    			p = "week"
	    		} else if (e === "24小时") {
	    			this.isActive1 = false
	    			this.isActive2 = false
	    			this.isActive3 = true
	    			p = "day"
	    		}
	    		this.diagram(p)
	    	},

	    	rdiagramchange: function (event) {
	    		var e = event.target.innerText
	    		var p = ""
	    		if (e === "1月") {
	    			this.isActive1r = true
	    			this.isActive2r = false
	    			this.isActive3r = false
	    			p = "month"
	    		} else if (e === "1周") {
	    			this.isActive1r = false
	    			this.isActive2r = true
	    			this.isActive3r = false
	    			p = "week"
	    		} else if (e === "24小时") {
	    			this.isActive1r = false
	    			this.isActive2r = false
	    			this.isActive3r = true
	    			p = "day"
	    		}
	    		this.diagram2(p)
	    	},
	    },

	    mounted(options){
	    	this.diagram("day")
	    	this.setData()
	    	herderjs.$on('refresh_flag', (data) => { 
				this.refresh_flag = data
			})
	    	//监听herderjs中的数据，实时接收herder.vue中传过来的值
	    	herderjs.$on('val', (data) => {
	    		if (data===1 && this.refresh_flag) {
	    			let _this = this
					setTimeout(function () {
						// console.log("2222222")
		    			let param = {period:30}
						_this.$api.post('blockchain/txsAndAmount', param, r => {
							_this.past30_tr = r.data.pastTxs
							_this.today_tr = r.data.txs
							_this.today_trprice = r.data.price
							herderjs.$emit('val', data + 1)
						})
					}, 10000)
	    		}
			})
		},

		beforeDestroy () {
			// this.hchart.clear()
			// this.vchart.clear()
		}	
	}
</script>


<style scoped>

	#MEcontent2_container {
		height: 5.52rem;
		width: 99.3%;
		margin-left: 0.3%;
		box-shadow: 0 2px 4px 0 rgba(179,179,179,0.50);
	}

	#MEtxtend {
		/*height: 100%;*/
		height: 0.7rem;
		background-color: rgb(255,255,255);
		box-shadow: 0 1px 2px 0 rgba(179,179,179,0.50);
		/*font-size: 1vw;*/
		margin-bottom: 0.3%;
		border-radius:2px;
	}

	#MEtxicon {
		width: 0.46rem;
		height: 0.46rem;
		float: left;
		/*margin:0 auto;*/
		margin-top: 0.12rem;
		margin-left: 0.05rem;
		background-image:url('../assets/icon_trend.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
		display: inline-block;
	}

	#MEtxtendtitle {
		font-size: 0.3rem;
		color: #333333;
		float: left;
		/*position: absolute;*/
		position: relative;
		/*top: 50%;
		margin-top: -0.22rem;*/
		height: 0.7rem;
		line-height: 0.7rem;
		margin-left: 0.03rem;
		margin-right: 0.14rem;
	}

	.diagrambtn {
		float: left;
		position: relative;
		font-size: 0.26rem;
		background-color: #fff;
		/*top: 50%;*/
		/*margin-top: -0.22rem;*/
		height: 0.7rem;
		line-height: 0.7rem;
		margin-left: 0.2rem;
		/*padding: 0.02rem 0.04rem;*/
		/*cursor: pointer;*/
		color: #333333;
	}

	#diagramfs {
		float: right;
		height: 0.7rem;
		line-height: 0.7rem;
		font-size: 0.26rem;
		margin-right: 0.2rem;
		color: #333333;
	}

	.active {
		color: #1DB2BF;
	}

	.MEbgc {
		background-color: rgb(255,255,255);
		/*margin-bottom: 40px;*/
		height: 85.5%;
	}

	.MEcharts {
		height: 3.5rem;
		width: 100;
		/*text-align: center;*/
	}

	.MEctitle {
		font-size: 0.3rem;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		color: #737373;
		margin-top: 0.2rem;
		/*margin-bottom: 7%;*/
	}

	.MEntitle {
		font-size: 0.4rem;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		color: #FF9900;
		margin-top: 0.1rem;
	}

	#MEmyChart {
		width: 98%;
		height: 100%;
	}

	#MEtransaction_num {
		/*height: 100%;*/
		height: 1.3rem;
		text-align: center;
	}

	.MEtoday_transaction_container {
		/*background-color: #4D4D4D;*/
		/*margin-left: 7%;*/
		height: 30%;
		/*width: 70%;*/
		border-radius:2px;
	}

	#note_dialog>>>.el-dialog__body {
		/*transform: rotate(90deg);*/
		padding: 0px;
		height: 100%;
		width: 100%;
	}

	#note_dialog>>>.el-dialog__header {
		padding: 0px;
	}

	#rotatechart {
		float: left;
		width: 86%;
		height: 100%;
	}

	#charttab {
		width: 14%;
		height: 100%;
		/*background-color: #000;*/
		float: right;
	}

	.rdiagrambtn {
		transform: rotate(90deg);
		float: left;
		position: relative;
		text-align: center;
		margin-top: 22vh;
		font-size: 0.3rem;
		cursor: pointer;
	}
</style>